import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import _ from 'underscore'

import { tabs } from '../static/index'
import { actions } from '../action/action'
import { message, Icon, } from "antd";

message.config({
    top: 200,
    duration: 3,
});

class Content extends Component {
    constructor(props) {
        super(props);
        this.state = {
            avatar: props.avatar
        }
    }
    // 将图片转为 base 64 格式
    getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }
    // 上传之前校验文件的大小和格式
    beforeUpload(file) {
        const isJPG = file.type.includes('image');
        if (!isJPG) {
            message.error('只能上传图片类型!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    }
    // 图片上传
    handleChange(e) {
        var file = e.target.files[0];
        let isCheck = this.beforeUpload(file);
        var self = this;
        if (isCheck) {
            this.getBase64(file, url => {
                self.props.changeAvatar(url, data => {
                    if (data.success) {
                        self.setState({
                            avatar: url
                        });
                        message.success(data.message);
                    }
                    else {
                        message.error(data.message);
                    }
                });
            })
        } else {
            return;
        }

    }
    render() {
        const { location, userName, nickName, email, changeAvatar, loading } = this.props;
        const tab = _.find(tabs, (i) => i.path == location.pathname) || {};
        var avatar = '';
        if (this.state.avatar.includes('base64')) {
            avatar = this.state.avatar;
        } else {
            avatar = this.state.avatar ? `http://47.104.2.156/${this.state.avatar}` : '/dist/images/default.png';
        }

        return <div>
            <div className="content">
                <div className="row">
                    <div className="col-md-3">
                        <div className="box box-solid">
                            <div className="box-body box-profile">
                                <label className="avatar">
                                    <img src={avatar} alt="头像" />
                                    <input type='file' style={{ display: 'none' }} onChange={this.handleChange.bind(this)} />
                                </label>
                                <h3 className="profile-username text-center">{nickName}</h3>
                                <p className="text-muted text-center">{email}</p>
                            </div>
                            {
                                loading ?
                                    <div className="overlay">
                                        <Icon className="fa" type="loading" />
                                    </div>
                                    : ''
                            }

                        </div>
                        <div className="box box-solid">
                            <div className="box-body no-padding">
                                <ul className="nav nav-stacked profile-nav">
                                    {tabs.map((i, index) => <li key={i.type} className={i.type == tab.type ? 'active' : ''}>
                                        <a href={'#' + i.path}>
                                            <i className={i.icon}></i>
                                            {' ' + i.name}
                                        </a>
                                    </li>)}
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="col-md-9" style={{ paddingLeft: 0 }}>
                        <div className="box box-solid profile-content">
                            {this.props.children}
                        </div>
                    </div>
                </div>
            </div>
            {/*<_Validate />*/}
        </div>
    }
}

class Validate extends Component {
    componentDidMount() {
        this.componentDidUpdate()
    }
    componentDidUpdate() {
        const { avatar, userName, email, oldPassword, newPassword, newPasswordRepeat, validate } = this.props;

        validate({
            avatar: avatar,
            userName: userName,
            email: email,
            oldPassword: oldPassword,
            newPassword: newPassword,
            newPasswordRepeat: newPasswordRepeat
        })
    }
    render() {
        return <nodiv></nodiv>
    }
}

//绑定数据
const _Content = connect(
    function (state) {
        return {
            avatar: state.avatar,
            userName: state.userName,
            nickName: state.nickName,
            email: state.email,
            loading: state.loading
        }
    },
    function (dispatch) {
        return {
            changeTab: (val) => {
                dispatch({
                    type: 'change-type',
                    val: val
                })
            },
            changeAvatar: (url, parentCallback) => {
                actions.changeAvatar(dispatch, url, parentCallback);
            }
        }
    }
)(Content);

const _Validate = connect(
    function (state) {
        return {
            avatar: state.avatar,
            userName: state.userName,
            nickName: state.nickName,
            email: state.email,
            oldPassword: state.oldPassword,
            newPassword: state.newPassword,
            newPasswordRepeat: state.newPasswordRepeat
        }
    },
    function (dispatch) {
        return {
            validate: (data) => actions.validate(data, dispatch)
        }
    }
)(Validate);

export default _Content